import QtQuick 1.0

Flipable {
     id: flipable
     width: 400
     height: 600

     property bool flipped: false
     property string currentOption: ""

     front: Rectangle {
         id: window
         width: 400; height: 600
         color: "#b71a1a"


         QRTypes{ id: qrTypes }

         Component {
             id: appDelegate
             Item {
                 width: 100; height: 20
                 scale: PathView.iconScale

                 /*Image {
                     id: myIcon
                     y: 20; anchors.horizontalCenter: parent.horizontalCenter
                     source: icon
                     smooth: true
                 }*/
                 Text {
                     anchors {
                         //top: myIcon.bottom;
                         horizontalCenter: parent.horizontalCenter
                         verticalCenter: parent.verticalCenter
                     }
                     text: name
                     font.family: "Calibri"
                     font.pointSize: 10
                     smooth: true
                 }

                 MouseArea {
                     anchors.fill: parent
                     onClicked: view.currentIndex = index
                 }
             }
         }

         Component {
             id: appHighlight
             Rectangle {
                 width: 100;
                 height: 20;
                 //color: "lightsteelblue";
                 color: "transparent"
                 border.color: "lightsteelblue"; border.width: 2; radius: 0

                 smooth: true
                 scale:  3
                 anchors.verticalCenter: parent.verticalCenter
             }
         }

         PathView {
             Keys.onRightPressed: if (!moving) {incrementCurrentIndex();}
             Keys.onUpPressed: if (!moving) {incrementCurrentIndex();}
             Keys.onLeftPressed: if (!moving) {decrementCurrentIndex();}
             Keys.onDownPressed: if (!moving) {decrementCurrentIndex();}
             onCurrentIndexChanged: {currentOption = qrTypes.get((currentIndex + 2)%8).name; console.log(currentOption);}
             id: view
             anchors.fill: parent
             highlight: appHighlight
             preferredHighlightBegin: 0.25
             preferredHighlightEnd: 0.25
             focus: true
             model: qrTypes
             delegate: appDelegate
             path: Path {
                 startX: 200
                 startY: 0

                 PathAttribute { name: "iconScale"; value: 0.5 }
                 PathLine{
                     x: 200
                     y: window.height / 2
                 }
                 PathAttribute { name: "iconScale"; value: 3 }
                 PathLine{
                     x: 200
                     y: window.height
                 }
                 PathAttribute { name: "iconScale"; value: 0.5 }
             }
         }
     }
     back: Item {
                id: loadedItem
                Loader {id: backSource}
            }

     transform: Rotation {
         id: rotation
         origin.x: flipable.width/2
         origin.y: flipable.height/2
         axis.x: 0; axis.y: 1; axis.z: 0     // set axis.y to 1 to rotate around y-axis
         angle: 0    // the default angle
         //onOriginChanged: flipable.back = card
     }

     states: State {
         name: "back"
         PropertyChanges { target: rotation; angle: 180 }
         when: flipable.flipped         
     }

     transitions: Transition {
         NumberAnimation { target: rotation; property: "angle"; duration: 1000 }         
     }

     MouseArea {
         anchors.fill: parent
         onClicked: {
                        if (currentOption == "")
                             backSource.source = "Card.qml"
                        else backSource.source = "FreeText.qml";

                        flipable.flipped = !flipable.flipped;
                    }
    }
}
